<html>

<head>
  <meta charset="utf-8" />
  <title>光强度动画</title>
  <script src='../w3d.js' type="text/javascript"></script>
  <script src='../config.js' type="text/javascript"></script>
  <script src='../../lib/lil-gui.umd.min.js' type="text/javascript"></script>
  <script type="text/javascript">
    let engine, scene, canvas, body,pointLight,sampler;
    function init () {
      canvas = document.getElementById('canvas');
      body = document.getElementById('body');
      let path = [
        `../../demo/pub/assets/skybox/night/pos-x.jpg`,
        `../../demo/pub/assets/skybox/night/neg-x.jpg`,
        `../../demo/pub/assets/skybox/night/pos-y.jpg`,
        `../../demo/pub/assets/skybox/night/neg-y.jpg`,
        `../../demo/pub/assets/skybox/night/pos-z.jpg`,
        `../../demo/pub/assets/skybox/night/neg-z.jpg`

      ]
      engine = new w.Engine({auth,
          canvas: canvas,
          contextmunu:false,//是否支持右键菜单
          background: path,
          environment: path,
          intensity: 1,
          ambientColor:"#ffffff",
          ambientIntensity:0.0
      });
      engine.init(this.initGPU);
    }
    function initGPU () {
      scene=engine.scene;
     // scene.orbit.maxPitch=Math.PI/3;//限制操作相机的orbit组件的最大倾斜角度。
      initCamera();//初始化相机姿态
      addMesh();//添加物体
      addLight();//添加光照
      addAnimation();//添加光照动画
      initGUI();
    }
    function initCamera(){
      let camera = engine.scene.getCamera()
      camera.near = 1;
      camera.far = 10000;
      camera.trans.position=[0,0,10];
      camera.pitch=Math.PI/4;
    }
    function addLight(){
      pointLight = new w.light.PointLight({
          intensity: 5.0,
        });
      let lightObject=new w.Object3D({position:[3,0,1]});
      lightObject.addComponent(pointLight);
      scene.addEntity(lightObject);
    }
    function addMesh () {
      let position = new Float32Array([
        -1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0
      ]);
      let texCood0 = new Float32Array([0, 1, 1, 1, 1, 0, 0, 0]);
      let normal = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
      let indices = new Uint32Array([0, 1, 2, 0, 2, 3]);
      const geometryPlane = new w.geometry.Geometry({position, texCood0, normal, indices });
      let urlFloor=ip+'demo/pub/assets/material/diffuseMap.png';;
      let m = new w.material.StandardMaterial({
        metalness: 0.8,
        roughness: 0.8,
        metalness: 0.2,
        map: urlFloor
      });
      const meshPlane = new w.component.Mesh({
        geometry: geometryPlane,
        material: m
      });
      let objectPlane=new w.Object3D({scale:[5,5,5]});
      objectPlane.addComponent(meshPlane);
      scene.addEntity(objectPlane);
      //球几何体
      let geometrySphere=new w.geometry.SphereGeometry({radius:0.5});
      let urlEarth=ip+'demo/pub/assets/material/earth_atmos_4096.jpg';
      let mSphere = new w.material.StandardMaterial({
        metalness: 0.8,
        roughness: 0.8,
        map: urlEarth
      });
      const meshSphere = new w.component.Mesh({
        geometry: geometrySphere,
        material: mSphere,
      });
      let objectSphere=new w.Object3D({position:[0,0,1]});
      objectSphere.addComponent(meshSphere);
      scene.addEntity(objectSphere);
    }
    function addAnimation(easing){
        //添加位置动画
      let animation=new w.animation.Animation({id:"point",loop:0});
      //position
      sampler=new w.animation.Sampler([0,2,4], [1,10,1],"LINEAR", easing);
      let channel=new w.animation.Channel(pointLight,"intensity");
      channel.add(sampler);
      animation.add(channel);
      scene.addAnimation(animation);
    }
    function initGUI(){
      const GUI = lil.GUI;
      const gui = new GUI();
      let folder = gui.addFolder('animation');
      folder.add(sampler, 'easing', easing);
    }
  </script>
  <style>
    html,
    body,
    #canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body onload="init()">
  <canvas id="canvas"></canvas>
</body>

</html>